import Header from './Header/Header'
import List from './List/List'
import Footer from './Footer/Footer'
import React, { Component } from 'react'
import './index.css'

export default class TodoList extends Component {
  //初始化状态
  state = {
    todos: [
      { id: '001', name: '吃饭', done: true },
      { id: '002', name: '睡觉', done: true },
      { id: '003', name: '打代码', done: false },
      { id: '004', name: '逛街', done: false },
    ],
  }

  render() {
    const { todos } = this.state
    return (
      <div className="todo-container">
        <div className="todo-wrap">
          <Header add={this.add} />
          <List
            todos={todos}
            deleteTodo={this.delete}
            checkTodo={this.checkTodo}
          />
          <Footer
            todos={todos}
            clearAll={this.clearAll}
            chooseAll={this.chooseAll}
          />
        </div>
      </div>
    )
  }

  // 增
  add = (todoObj) => {
    this.setState({ todos: [todoObj, ...this.state.todos] })
  }

  //删
  delete = (v) => {
    this.setState({ todos: this.state.todos.filter((item) => item.id !== v) })
    // console.log(v)
  }

  // 改
  checkTodo = (id, value) => {
    let todos = this.state.todos.map((v) => {
      if (v.id === id) v.done = value
      return v
    })
    this.setState({ todos })
  }

  // 清除所有
  clearAll = () => {
    this.setState({ todos: this.state.todos.filter((v) => v.done === false) })
  }

  // 全选
  chooseAll = (done) => {
    let todos = this.state.todos.map((v) => {
      v.done = done
      return v
    })
    this.setState({ todos })
  }
}
